<template>
  <div class="chart-box">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import { accSubtr } from '@/common/js/utils';
  export default {
    name: 'bar',
    props: {
      chConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //是否禁止legend的默认点击事件
      banLegendDefaultClick: {
        type: Boolean,
        default: false,
      },
    },

    data() {
      return {
        myChart: null,
        polar: {
          color: ['#3384fe'],
          title: {
            text: this.chConfig.title,
            textStyle: {
              fontSize: 14,
              color: this.chConfig.titleColor || '#03BCB5',
              fontWeight: 400,
            },
            top: this.chConfig.titleTop,
          },
          tooltip: {
            show: this.chConfig.tooltip.show,
            trigger: 'axis',
            formatter: this.chConfig.tooltip.formatter || null,
          },
          legend: {
            type: this.chConfig.legend.type || 'plain',
            show: this.chConfig.legend.show,
            data: this.chConfig.legend.data,
            x: this.chConfig.legend.x,
            y: this.chConfig.legend.y,
            left: this.chConfig.legend.left,
            right: this.chConfig.legend.right,
            top: this.chConfig.legend.top,
            orient: this.chConfig.legend.orient || 'horizontal',
            itemWidth: 30,
            textStyle: {
              color: '#333',
            },
            itemGap: 20,
            height: this.chConfig.legend.height,
            width: this.chConfig.legend.width,
            formatter: function (name) {
              return name;
            },
          },
          xAxis: [
            {
              name: this.chConfig.xUnit,
              type: 'category',
              data: this.chConfig.xAxisData,
              axisTick: {
                // 刻度线
                show: false,
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#ccc', //左边线的颜色
                  width: '1', //坐标线的宽度
                },
              },
              axisLabel: {
                show: true,
                interval: 0, //使x轴横坐标全部显示
                rotate: this.chConfig.xRotate || 0,
                textStyle: {
                  //x轴字体样式
                  color: 'rgba(219,225,255,1)',
                  margin: 15,
                },
                textStyle: {
                  color: '#333', //坐标值得具体的颜色
                },
                formatter: function (value, index) {
                  if (value.length > 4) {
                    return value.substr(0, 4) + '..';
                  } else {
                    return value;
                  }
                },
              },
              position: this.chConfig.xPosition || 'bottom',
            },
          ],
          dataZoom: this.chConfig.dataZoom
            ? [
                {
                  type: 'slider',
                  show: true,
                  minValueSpan: 7,
                  maxValueSpan: 10,
                  xAxisIndex: 0,
                  bottom: 10,
                  // start:_this.zoomShow == true ? document.body.clientWidth < 1920 ? 40 : 60 : 100,
                  start: document.body.clientWidth <= 1440 ? 70 : 100,
                  end: 0,
                  height: 10,
                  // handleSize: '0px',//控制手柄的尺寸，展示几条数据
                  handleStyle: {
                    color: '#3AAAF0',
                    borderColor: '#007acc',
                  },
                  fillerColor: 'rgba(27, 102, 177, 1)',
                  backgroundColor: 'rgba(4, 28, 52, 1)',
                  showDetail: false,
                  borderColor: '#002944',
                },
              ]
            : [],
          grid: {
            top: this.chConfig.gridTop,
            bottom: this.chConfig.gridBottom,
            left: this.chConfig.left,
            right: this.chConfig.right,
            x: this.chConfig.x,
            y: this.chConfig.y,
            x2: this.chConfig.x2,
            y2: this.chConfig.y2,
          },
          yAxis: {
            show: this.chConfig.yAxis.show,
            name: this.chConfig.yAxis.name,
            nameTextStyle: {
              color: '#333',
              fontSize: 12,
            },
            splitLine: { show: this.chConfig.yAxis.splitLineShow },
            type: this.chConfig.yAxis.type || 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#ccc', //左边线的颜色
                width: '1', //坐标线的宽度
              },
            },
            axisLabel: {
              textStyle: {
                color: '#333', //坐标值得具体的颜色
              },
              formatter: (value, index) => {
                return this.chConfig.yAxis.grainUnit ? value + this.chConfig.yAxis.grainUnit || '' : this.chConfig.yAxis.gridShow ? value : '';
              },
            },
            data: this.chConfig.yAxis.data || null,
          },
          series: this.chConfig.list,
        },
      };
    },

    methods: {
      initChart() {
        const chart = this.$refs.chart;
        this.myChart = echarts.init(chart);
        this.myChart.setOption(this.polar);
        this.myChart.on('click', params => {
          this.clickChart(params);
        });
        this.myChart.on('legendselectchanged', params => {
          this.clickLegend(params);
        });
        window.addEventListener('resize', () => {
          this.resize();
        });
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', () => {
            this.resize();
          });
        });
      },
      resize() {
        this.$nextTick(() => {
          this.myChart.resize();
        });
      },

      clickChart(params) {
        this.$emit('chartClick', {
          dataIndex: params.dataIndex,
          data: params.data,
        });
      },

      clickLegend(params) {
        console.log(params);
        if (this.banLegendDefaultClick) {
          this.myChart.setOption({
            legend: { selected: { [params.name]: true } },
          });
        }

        this.$emit('clickLegend', params.name);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts,
  .chart,
  .chart-box {
    width: 100%;
    height: 100%;
  }
  .chart {
    z-index: 1;
  }
</style>
